<template>
  <div
      class="tw-w-[100%]  tw-bg-white tw-absolute tw-top-70 tw-z-50 tw-box-border  tw-hidden"
  >
    <ul class="changs-dropdown">
      <li
          v-for="(item, index) in TrendList"
          :key="item.id"
          class="hover:tw-bg-[#f4f5f6] tw-min-w-118 tw-h-32 flex-all-center font-small  select-box tw-text-[#a7a9b2] hover:tw-text-[#04addb]"
          @click="changeDropDown(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  TrendList: {
    type: Array,
    default: [],
  },
});
const changeDropDown = (item) => {
  emit("changeDropDown", item);
};
const emit = defineEmits(["changeDropDown"]);
</script>

<style lang="scss" scoped>
.select-box {
  border-bottom: 1px solid #ebebeb;
}

.changs-dropdown {
  border-left: 1px solid #efeff0;
  border-right: 1px solid #efeff0;
}
</style>
